import React, { Component, Fragment } from 'react';
import { Row, Col, Card, Avatar, Button, Icon, Radio, Tag, Spin, Table } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import styles from './success.less';
const RadioButton = Radio.Button;
function jiequ(arr,n) {
        var num = n;//一个数组里面的元素个数
       // var arr = [1,2,3,4,5,6,7,8,9,10];
        if(arr&&arr.length){
          var Arr = new Array(Math.ceil(arr.length/num));
          for(var i = 0; i<Arr.length;i++){
          Arr[i] = new Array();
          for(var j = 0; j<num; j++){
          Arr[i][j] = '';
          }
          }
          for(var i = 0; i<arr.length;i++){
            Arr[parseInt(i/num)][i%num] = arr[i];
          }
          return Arr
        }
        return []

}
@connect(({ xcxauth, loading }) => ({
  xcxauth,
  authInfo: xcxauth.authInfo,
  loading: loading.effects['xcxauth/GetAuthInfo'],
}))
class AuthSuccess extends Component {
  state={
    isAuth:true
  }
  componentWillMount() {
    const { dispatch } = this.props;
    let that=this;
    dispatch({
      type: 'xcxauth/GetAuthStatus',
      callback: {
        success: res => {
          console.log(res, 777);
          if (res.Code == 0) {
            dispatch({
              type: 'xcxauth/GetAuthInfo',
            });
          } else {
            that.setState({
              isAuth:false
            })
           // router.push('/100000000001/xcxauth/error/4');
          }
        },
      },
    });
  }
  goAuth = () => {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'xcxauth/GetPreAuthUrl',
      //type:'xcxauth/GoToWeixin',
      callback: {
        success: res => {
          // dispatch({
          //   type: 'xcxauth/GoToWeixin',
          //   payload: {
          //     MpUrl: res.Data.MpUrl,
          //     NotifyUrl: res.Data.NotifyUrl,
          //   },
          // });
          window.location.href = `${res.Data.MpUrl}`;
        },
      },
    });
  };
  reload = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'xcxauth/GetAuthInfo',
    });
  };
  render() {
    const {
      authInfo,
      authInfo: { Permission: authList },
      loading,
    } = this.props;
    //console.log(authInfo,789)
    //const {authList:{Permission}} =authInfo;
    console.log(authList);
    const newlist=jiequ(authList,2);
    const dataSource = [{
      tit: '小程序名称',
      essinfo: authInfo.AppName,
      explain: '小程序发布后，非个人帐户可通过认证方式改名。',
      act:'重新授权',
    }, {
      tit: '小程序ID',
      essinfo: authInfo.AppId,
      explain: '每个小程序ID特有的ID号',
      act:'',
    },
    {
      tit: '小程序码',
      essinfo: '图片',
      explain: '只可访问线上版本小程序',
      act:'刷新',
    },{
      tit: '小程序介绍',
      essinfo: '我是介绍介绍',
      explain: '一个月内可申请5次修改',
      act:'',
    },{
      tit: '服务范围',
      essinfo: authInfo.CatesDescr,
      explain: '一个月内可申请修改3次',
      act:'',
    },{
      tit: '微信认证',
      essinfo: authInfo.VerifyType,
      explain: '已认证帐号可使用微信支付权限，个人类型帐号暂不支持微信认证（认证入口：登录小程序——设置——基本设置——微信认证——详情）',
      act:'',
    },{
      tit: '版本号',
      essinfo: '1.4.3',
      explain: '当前线上版本',
      act:'详情',
    },{
      tit: '目标小程序',
      essinfo: '1个',
      explain: '目标小程序即在当前小程序里允许跳转去的其他小程序，最多10个；若要修改，则需再次提交版本审核',
      act:['查看','添加'],
    }];
    const columns = [{
      title: '基本信息',
      dataIndex: 'tit',
      colSpan: 2,
      width: '17%',
      align: 'left',
    }, {
      title: '',
      dataIndex: 'essinfo',
      colSpan: 0,
      width: '30%',
    }, {
      title: '说明',
      dataIndex: 'explain',
      className: 'explain',
    }, {
      title: '操作',
      dataIndex: 'act',
      width: '10%',
      align: 'right',
      render: (text, row, index) => {
        if (index === 1) {
          return <a href="javascript:;">{text}</a>;
        }
        return {
          children: <a href="javascript:;">{text}</a>,
          
        };
      },
    }];
    return (
      <Fragment>
        {
          this.state.isAuth?
          <Spin spinning={loading}>
          <Card title={'基本信息'} className={styles.EssInfo}>
            <Table columns={columns} dataSource={dataSource} bordered={false} pagination={false} />
                {/* <Row>
                  <Col style={{ marginBottom: 10 }}>
                    <Row>
                      <Col span={3} style={{ textAlign: 'right' }}>
                        <span>小程序名称：</span>
                      </Col>
                      <Col span={21} style={{ textAlign: 'left' }}>
                        <span>{authInfo.AppName}</span>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col style={{ marginBottom: 10 }}>
                    <Row>
                      <Col span={3} style={{ textAlign: 'right' }}>
                        <span>小程序AppId：</span>
                      </Col>
                      <Col span={21} style={{ textAlign: 'left' }}>
                        <span>{authInfo.AppId}</span>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col style={{ marginBottom: 10 }}>
                    <Row>
                      <Col span={3} style={{ textAlign: 'right' }}>
                        <span>服务范围：</span>
                      </Col>
                      <Col span={21} style={{ textAlign: 'left' }}>
                        <span>{authInfo.CatesDescr}</span>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col style={{ marginBottom: 10 }}>
                    <Row>
                      <Col span={3} style={{ textAlign: 'right' }}>
                        <span>认证信息：</span>
                      </Col>
                      <Col span={21} style={{ textAlign: 'left' }}>
                        <span>{authInfo.VerifyType}</span>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col style={{ marginBottom: 10 }}>
                    <Row>
                      <Col span={3} style={{ textAlign: 'right' }}>
                        <span>发布状态：</span>
                      </Col>
                      <Col span={21} style={{ textAlign: 'left' }}>
                        <span>{authInfo.StatuName}</span>
                      </Col>
                    </Row>
                  </Col>
                </Row> */}
          </Card>
          <Card title={'已授权权限'} style={{marginTop:24}} className={styles.AuthList}>
            {newlist && newlist.length
              ? newlist.map((item, index) => {
                  return (
                    <Row style={{marginBottom: 10}} key={index} >
                    {
                      item.map((v,i)=>{
                        return (
                          <Col key={i} span={12}>
                            <Tag
                              style={{
                                color: v.Auth ? '#52C41A' : '#BFBFBF',
                                border: v.Auth ? '1px solid #52C41A' : '1px solid #BFBFBF',
                              }}
                            >
                              {v.Auth ? '已授权' : '未授权'}
                            </Tag>
                            <span>{v.Name}</span>
                          </Col>
                        )
                      })
                    }
                    </Row>
                  );
                })
              : null}
          </Card>
          <Fragment>
          {/* <div className="xkd-bottom-actions">
            <Button onClick={() => this.reload()} loading={loading} >
                  刷新小程序信息
                </Button>
                <Button onClick={() => this.goAuth()} loading={loading} style={{marginLeft:10}}>
                  重新授权
                </Button>
          </div> */}
              {/* <div style={{textAlign:'center',marginTop:24}}>
              <Button onClick={() => this.reload()} loading={loading} >
                刷新小程序信息
              </Button>
              <Button onClick={() => this.goAuth()} loading={loading} style={{marginLeft:10}}>
                重新授权
              </Button>
              </div> */}
            </Fragment>
          </Spin>
          :
          <Fragment>
             <div className="xkd-bottom-actions">
                  <Button onClick={() => this.goAuth()} loading={loading}>
                  立即授权
                </Button>
            </div>
          </Fragment>
        }
      </Fragment>
    );
  }
}

export default AuthSuccess;
